<template>
    <view class="index">
        <view class="header">
            <image class="profile" src="/static/profile.png" />
            <view class="info">
                <view class="name">你好，系统管理员</view>
                <view class="date">{{ $u.timeFormat(timestamp, "yyyy年mm月dd日") }}</view>
            </view>
        </view>
        <image class="tq_img" src="/static/tq.png" />
        <view class="zh_box">
            <image @click="toDy" src="/static/zhdy.png" />
            <image @click="toCK" src="/static/zhck.png" />
            <image @click="toCPSY" src="/static/cpsy.png" />
            <image @click="gnkfzh" src="/static/zzgl.png" />
        </view>
        <view class="sxt">
            <view class="sxt_title">
                <view class="sxt_title_left">通用摄像头</view>
                <view class="sxt_title_right" @click="tosxt">查看更多</view>
            </view>
            <view class="sxt_bn">
                <swiper
                    class="swiper"
                    circular
                    :value="current"
                    :indicator-dots="false"
                    :autoplay="true"
                    :interval="4000"
                    :duration="500"
                    @change="swiperChange"
                >
                    <swiper-item v-for="item in list">
                        <view class="swiper_item" @click="toVideo">
                            <image :src="item.image" />
                            <view class="swiper_item_button">
                                <view class="play-icon"></view>
                            </view>
                            <view class="swiper_item_info">
                                <view>{{ item.name }}</view>
                                <view>{{ current + 1 }}/{{ list.length }}</view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="sbzt">
            <view class="sbzt_title">
                <view class="sbzt_title_left">设备状态</view>
                <view class="sbzt_title_right" @click="toDy">设备监测</view>
            </view>
            <view class="charts-box2">
                <qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
            </view>
        </view>
        <view class="sjbb">
            <view class="sjbb_title">
                <view class="sjbb_title_left"> 数据报表</view>
                <view class="sjbb_title_right">
                    <view :class="[sjbbCur == 1 ? 'cur' : '']" @click="setCur(1)"
                        >单元</view
                    >
                    <view :class="[sjbbCur == 2 ? 'cur' : '']" @click="setCur(2)"
                        >仓库</view
                    >
                </view>
            </view>
            <view class="sjbb_content">
                <view @click="showXT"
                    >{{ sjbbTitle1 }} <image class="jiantou" src="/static/jiantou.png"
                /></view>
                <view @click="showXTC"
                    >{{ sjbbTitle2 }} <image class="jiantou" src="/static/jiantou.png"
                /></view>
            </view>
            <view class="sjbb_charts">
                <view class="charts-box">
                    <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
                </view>
            </view>
        </view>
        <u-picker
            :show="show"
            :columns="columns"
            keyName="name"
            @close="pickerClose"
            @confirm="confirm"
        ></u-picker>
    </view>
</template>

<script>
export default {
    data() {
        return {
            chartData2: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts2: {
                rotate: false,
                rotateLock: false,
                color: ["#1890FF", "#91CB74", "#FAC858"],
                padding: [5, 5, 5, 5],
                dataLabel: true,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "right",
                    lineHeight: 25,
                },
                title: {
                    name: "设备总数(台)",
                    fontSize: 12,
                    color: "#666666",
                },
                subtitle: {
                    name: "100",
                    fontSize: 25,
                    color: "#7cb5ec",
                },
                extra: {
                    ring: {
                        ringWidth: 10,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF",
                    },
                },
            },
            sjbbTitle1: "",
            sjbbTitle2: "",
            xt_c_list: [
                {
                    name: "土壤湿度",
                    data: "55.4%",
                    p_name: "监控系统测试",
                },
                {
                    name: "电导率",
                    data: "125.0uS/cm",
                    p_name: "监控系统测试",
                },
                {
                    name: "pH值",
                    data: "53.4",
                    p_name: "监控系统测试",
                },
                {
                    name: "氮离子",
                    data: "63.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "磷离子",
                    data: "52.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "钾离子",
                    data: "12.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "盐分",
                    data: "74.0mg/L",
                    p_name: "监控系统测试",
                },
            ],
            xt_list: [
                {
                    name: "监控系统测试",
                    code: "编号 95",
                    gs_code: "公司编号 77",
                    zkid: "主控ID 1",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "灌溉系统",
                    code: "编号 142",
                    gs_code: "公司编号 17",
                    zkid: "主控ID 2",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "环境监测系统",
                    code: "编号 15",
                    gs_code: "公司编号 23",
                    zkid: "主控ID 3",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "虫情监测系统",
                    code: "编号 42",
                    gs_code: "公司编号 61",
                    zkid: "主控ID 4",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "土壤舆情",
                    code: "编号 41",
                    gs_code: "公司编号 22",
                    zkid: "主控ID 5",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "野生动物监测系统",
                    code: "编号 141",
                    gs_code: "公司编号 212",
                    zkid: "主控ID 6",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "水肥一体化系统",
                    code: "编号 51",
                    gs_code: "公司编号 32",
                    zkid: "主控ID 6",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "舆情系统",
                    code: "编号 63",
                    gs_code: "公司编号 54",
                    zkid: "主控ID 7",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
            ],
            show: false,
            columns: [],
            sjbbCur: 1,
            chartData: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts: {
                color: [
                    "#1890FF",
                    "#91CB74",
                    "#FAC858",
                    "#EE6666",
                    "#73C0DE",
                    "#3CA272",
                    "#FC8452",
                    "#9A60B4",
                    "#ea7ccc",
                ],
                padding: [20, 20, 0, 0],
                dataLabel: false,
                dataPointShape: true,
                enableScroll: false,
                legend: {},
                xAxis: {
                    disableGrid: true,
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2,
                    data: [
                        {
                            min: 0,
                            max: 150,
                        },
                    ],
                },
            },
            current: 0,
            title: "Hello",
            timestamp: new Date().getTime(),
            list: [
                {
                    image: "/static/bn_1.png",
                    name: "测试摄像头",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头1",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头2",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头3",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头5",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头6",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头7",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头8",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头11",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头12",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头13",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头14",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头15",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头16",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头17",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头18",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头21",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头22",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头23",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头24",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头25",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头26",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头27",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头28",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头31",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头32",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头33",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头34",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头35",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头36",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头37",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头38",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头41",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头42",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头43",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头44",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头45",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头46",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头47",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头48",
                },
            ],
            pickerType: 1,
            ck_c_list: [
                {
                    name: "配肥泵",
                    status: "1",
                },
                {
                    name: "阀3",
                    status: "1",
                },
                {
                    name: "阀4",
                    status: "1",
                },
                {
                    name: "阀2",
                    status: "2",
                },
                {
                    name: "阀1",
                    status: "1",
                },
            ],
            ck_list: [
                {
                    name: "1号仓库",
                    code: "编号 95",
                    gs_code: "公司编号 77",
                    zkid: "主控ID 1",
                    sbzs: "10",
                    yxsb: "8",
                    dxsb: "2",
                },
                {
                    name: "灌溉设备仓库",
                    code: "编号 142",
                    gs_code: "公司编号 17",
                    zkid: "主控ID 2",
                    sbzs: "46",
                    yxsb: "52",
                    dxsb: "14",
                },
                {
                    name: "检测设备仓库",
                    code: "编号 15",
                    gs_code: "公司编号 23",
                    zkid: "主控ID 3",
                    sbzs: "51",
                    yxsb: "23",
                    dxsb: "28",
                },
                {
                    name: "西部仓库",
                    code: "编号 42",
                    gs_code: "公司编号 61",
                    zkid: "主控ID 4",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "10",
                },
                {
                    name: "总部仓库",
                    code: "编号 41",
                    gs_code: "公司编号 22",
                    zkid: "主控ID 5",
                    sbzs: "26",
                    yxsb: "14",
                    dxsb: "12",
                },
                {
                    name: "3号仓库",
                    code: "编号 141",
                    gs_code: "公司编号 212",
                    zkid: "主控ID 6",
                    sbzs: "70",
                    yxsb: "58",
                    dxsb: "12",
                },
                {
                    name: "66号仓库",
                    code: "编号 51",
                    gs_code: "公司编号 32",
                    zkid: "主控ID 6",
                    sbzs: "152",
                    yxsb: "138",
                    dxsb: "14",
                },
                {
                    name: "备用仓库",
                    code: "编号 63",
                    gs_code: "公司编号 54",
                    zkid: "主控ID 7",
                    sbzs: "19",
                    yxsb: "17",
                    dxsb: "2",
                },
            ],
        };
    },
    onLoad() {
        this.sjbbTitle1 = this.xt_list[0].name;
        this.sjbbTitle2 = this.xt_c_list[0].name;
        this.setChartData();
        this.getServerData();
    },
    methods: {
        toCPSY() {
            uni.navigateTo({
                url: "/pages/ck/syxx",
            });
        },
        getServerData() {
            //模拟从服务器获取数据时的延时
            setTimeout(() => {
                //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
                var num = Math.floor(Math.random() * 100);
                var num2 = Math.floor(Math.random() * 100);
                let res = {
                    series: [
                        {
                            data: [
                                {
                                    name: "运行设备",
                                    value: num,
                                },
                                {
                                    name: "断线设备",
                                    value: num2,
                                },
                                { name: "故障", value: 0 },
                            ],
                        },
                    ],
                };
                this.$set(this.opts2.subtitle, "name", num + num2);
                this.chartData2 = JSON.parse(JSON.stringify(res));
            }, 500);
        },
        toVideo() {
            uni.navigateTo({ url: "/pages/dy/videoDetail" });
        },
        tosxt() {
            uni.setStorageSync("tabParams", 2);
            uni.switchTab({ url: "/pages/dy/index" });
        },
        toDy() {
            uni.switchTab({ url: "/pages/dy/index" });
        },
        gnkfzh() {
            uni.showModal({
                title: "",
                content: "功能开发中",
                showCancel: false,
                success: ({ confirm, cancel }) => {},
            });
        },
        pickerClose() {
            this.show = false;
        },
        showXT() {
            this.pickerType = 1;
            this.show = true;
            if (this.sjbbCur == 1) {
                this.columns = [this.xt_list];
            } else {
                this.columns = [this.ck_list];
            }
        },
        showXTC() {
            this.pickerType = 2;
            this.show = true;
            if (this.sjbbCur == 1) {
                this.columns = [this.ck_c_list];
            } else {
                this.columns = [this.ck_c_list];
            }
        },
        confirm(arr) {
            if (this.pickerType == 1) {
                this.sjbbTitle1 = arr.value[0].name;
            } else {
                this.sjbbTitle2 = arr.value[0].name;
            }
            this.show = false;
            this.setChartData();
        },
        setCur(i) {
            this.$set(this, "sjbbCur", i);
            if (this.sjbbCur == 1) {
                this.sjbbTitle1 = this.xt_list[0].name;
                this.sjbbTitle2 = this.xt_c_list[0].name;
            } else {
                this.sjbbTitle1 = this.ck_list[0].name;
                this.sjbbTitle2 = this.ck_c_list[0].name;
            }
            this.setChartData();
        },
        setChartData() {
            var res = {
                categories: [],
                series: [
                    {
                        name: "",
                        linearColor: [
                            [0, "#1890FF"],
                            [0.25, "#00B5FF"],
                            [0.5, "#00D1ED"],
                            [0.75, "#00E6BB"],
                            [1, "#90F489"],
                        ],
                        data: [],
                    },
                ],
            };

            for (var i = 0; i < 24; i++) {
                res.series[0].data.push(Math.floor(Math.random() * 100));
                res.categories.push(i + ":00");
            }
            this.$set(this, "chartData", res);
        },
        swiperChange(e) {
            this.$set(this, "current", e.detail.current);
        },
        toCK() {
            uni.navigateTo({ url: "/pages/ck/index" });
        },
    },
};
</script>

<style lang="scss" scoped>
.sjbb_charts {
    margin-top: 30rpx;
    overflow-x: auto;
}
.sjbb_content {
    height: 80rpx;
    background: #eee;
    border-radius: 12rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    justify-content: space-between;
    box-sizing: border-box;
    view {
        display: flex;
        align-items: center;
        gap: 16rpx;
        font-size: 28rpx;
        .jiantou {
            width: 24rpx;
            height: 24rpx;
        }
    }
}
.charts-box {
    width: 2000rpx;
    height: 400rpx;
}
.charts-box2 {
    width: 100%;
    height: 300rpx;
}
.index {
    padding: 0 40rpx;
}
.header {
    margin-top: 40rpx;
    display: flex;
    gap: 16rpx;
    .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .name {
        font-size: 34rpx;
        font-weight: 700;
        margin-bottom: 20rpx;
    }
    .date {
        font-size: 26rpx;
        color: #999;
    }
    .profile {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }
}

.tq_img {
    margin-top: 50rpx;
    height: 80rpx;
    width: 100%;
    image {
        width: 100%;
        height: 100%;
    }
}
.zh_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50rpx;
    image {
        width: 160rpx;
        height: 160rpx;
    }
}
.sxt {
    margin-top: 50rpx;
    .sxt_title {
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .sxt_title_left {
            font-size: 36rpx;
            font-weight: 700;
            color: #333;
        }
        .sxt_title_right {
            font-size: 28rpx;
            color: #1296db;
        }
    }
    .sxt_bn {
        margin-top: 20rpx;
        padding: 24rpx;
        background: #fff;
        border-radius: 12rpx;
    }
    .swiper {
        height: 360rpx;
        image {
            height: 360rpx;
            width: 100%;
        }
        .swiper_item {
            position: relative;
            .swiper_item_button {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100rpx;
                height: 100rpx;
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: transform 0.3s, background-color 0.3s;
            }

            .play-icon {
                width: 0;
                height: 0;
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 25px solid #fff;
                margin-left: 5px;
            }
            .swiper_item_info {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 50rpx;
                background: rgba($color: #000000, $alpha: 0.5);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 22rpx;
                padding: 0 16rpx;
                box-sizing: border-box;
            }
        }
    }
}
.sjbb {
    margin-top: 50rpx;
    padding: 24rpx;
    background: #fff;
    overflow: hidden;
    .sjbb_title {
        padding: 0 6rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .sjbb_title_left {
            font-size: 36rpx;
            font-weight: 700;
            color: #333;
        }
        .sjbb_title_right {
            display: flex;
            align-items: center;
            gap: 24rpx;
            view {
                padding: 10rpx 20rpx;
                background-color: #eee;
                border-radius: 12rpx;
            }
            .cur {
                background: #1296db;
                color: #fff;
            }
        }
    }
}
.sbzt {
    margin-top: 50rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 12rpx;

    .sbzt_title {
        padding: 0 6rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .sbzt_title_left {
            font-size: 36rpx;
            font-weight: 700;
            color: #333;
        }
        .sbzt_title_right {
            font-size: 28rpx;
            color: #1296db;
        }
    }
    .sbzt_img {
        margin-top: 30rpx;
        width: 100%;
        height: 200rpx;
    }
}
</style>
